<template>
  <div class="v-footer border-top">
     <ul class="nav">
       <li>
         <router-link to="/payHistory">
           <img src="../../assets/images/b_record.png" v-if="payHistory"/>
           <img src="../../assets/images/record.png" v-else/>
           <span>水电费记录</span>
         </router-link>
       </li>
       <li>
         <router-link to="/myself">
           <img src="../../assets/images/b_mine.png" v-if="myself"/>
           <img src="../../assets/images/mine.png" v-else/>
           <span>我的</span>
         </router-link>
       </li>
       <li>
         <router-link to="/news">
           <img src="../../assets/images/b_ad.png" v-if="news"/>
           <img src="../../assets/images/ad.png" v-else=/>
           <span>消息中心</span>
         </router-link>
       </li>
     </ul>
  </div>
</template>
<script>
   export default {
     name:'v-footer',
     data(){
       return {
         payHistory:false, myself:false, news:false
       }
     },
     methods:{
       navClick:function (e) {
         if(this.$router.name == 'payHistory'){
           this.payHistory == true;
           this.myself == false;
           this.news == false;
           this.home.color='#178cf9';
         }
         if(this.$router.name == 'myself'){
           this.payHistory == false;
           this.myself == true;
           this.news == false;
           this.payHistory.color='#178cf9';
         }
         if(this.$router.name == 'news'){
           this.payHistory == false;
           this.myself == false;
           this.news == true;
           this.myself.color='#178cf9';
         }
       }
     },
     mounted:function () {
       this.navClick();
     },
     watch:{  //路由变化时重新渲染模板
       '$router':'navClick'
     }
   }
</script>
<style>
 .v-footer{
  width:100%;
  position: fixed;
  bottom:0;
  left:0;
  background-color: #fff;
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
 }
  .nav li{
    width:33%;
    float:left;
    position: relative;
    text-align: center;
    padding: .07rem 0 .02rem 0;
  }
  .nav a{
    display: inline-block;
    line-height: .17rem;
  }
  .nav li img{
    width:.22rem;
    height:.25rem;
  }
  .nav li span{
    text-align: center;
    display: block;
    font-size: .1rem;
    color: #888;
  }
</style>
